<%@ page import="com.zaofan.utils.WebUtils" %>
<%@ page import="java.util.Map" %>
<%@ page import="java.util.HashMap" %><%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2016/5/24
  Time: 15:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>注册</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=1" />
    <title>signin</title>
    <link rel="stylesheet" href="signin.css">
    <link rel="stylesheet" href="../public/css/bootstrap.css">
    <script src="../public/js/jquery.min.js"></script>
    <script src="../public/js/common.js"></script>
    <style>
        html{
            font-size: 62.5%;
        }
        *{
            margin: 0px;
            padding: 0px;
        }
        body{
            width: 100%;
            height: 100%;
        }

        .money-lable{
            font-size: 12px;
            left:12px;
            bottom: 2px;
        }
        .money-count{
            font-size: 35px;
            line-height: 82px;
            right: 2px;
        }
        .money-Box{
            float: left;

            width: 30%;
            height: 100%;
            position: relative;
        }
        .money-Box p{
            position: absolute;
            color: red;
            display: block;
        }
        .rule{
            float: left;

            height: 100%;
            width: 70%;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .rule-ul{
            width: 100%;
            height: 100%;
            padding: 0px;
            padding-left: 10px;
            list-style-type : none;
        }
        .rule-ul li{
            padding: 0px;
            font-size: 1.2rem;
            color: grey;
        }
        .yhqbg{
            display: none;

            width: 100%;
            height: 100%;
            top:0px;
            left:0px;
            background: rgba(0,0,0,0.75);
            position: fixed;
            z-index: 98;

        }
        .yhq{


            position: absolute;
            width: 100%;
            height: 100%;
            background:  url('../images/bg_gift.png') no-repeat  ;
            background-size: 100% 90%;
            z-index: 99;
        }
        .yhq-container{
            height: 50%;
            margin-top: 68%;
            position: relative;
            overflow-y: hidden;
        }
        .yhq-up{
            width: 100%;
            margin: 0 auto;
            position: relative;

        }
        .yhq-up img{
            width: 100%;
        }
        .yhq-lower{

            width: 100%;
            margin: 0 auto;
        }

        .yhq-lower img{
            margin-top: 2px;
            display: block;
            width: 100%;
        }
        .yhq-ul{
            overflow-y: scroll;
            list-style:none;width:65%;

            margin: 0 auto;
            height: 80%;
            padding: 0px;
        }
        .yhq-li{
            width:100%;
            height:82px;
            margin-top: 2px;
            background: url('../images/hongbaoul.png') no-repeat ;
            line-height: 40px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-left: 0px;

            background-size: 100% 100%;
        }
        .body{
            position: relative;width: 100%;height: 100%;

        }
        .close-yhq{
            position: absolute;
            z-index: 100;
            right: 20px;
            top: 20px;
            height: 35px;
            width: 35px;
        }
        .miaoshu{

            position: absolute;
            color: white;
            top: 250px;
            left: 79px;
            z-index: 100;
        }
    </style>
</head>
<body>
<!-- 头部 -->
<header>
    <!--  <div class="h-l"><i class="iconfont icon-person">&#xe601;</i></div> -->
</header>
<!-- 导航 -->
<!-- 导航 -->

<section class="body" style="">
    <div class="my_signin">
        <img src="/wechat/images/bg_signin.jpg">
        <form id="form" onsubmit="false" method="post">
            <input type="hidden" value="wechat" name="platform">
            <input type="hidden" value="" name="from" id="from">
            <div class="row1">
                <i class="iconfont icon-phone">&#xe603;</i>
                <span>+86</span>
                <input name="mobile" id="mobile" type="text"  value="" placeholder="手机号" class="user-name"  data-caution="用户名不能为空">
            </div>
            <!--/row-->
            <div class="row1">
                <i class="iconfont icon-phone">&#xe604;</i>
                <input type="text" id="code"  name="code"  placeholder="输入验证码" class="user-name" data-caution="请输入验证码">
                <input name="getcode" onclick="sendMessage(this)" id="getCode" type="button"  value="获取验证码" placeholder="输入验证码" class="btn-send"  >
            </div>
            <!--/row1-->
            <div class="row1">
                <i class="iconfont icon-phone">&#xe600;</i>
                <input name="password" id="password" type="password" placeholder="输入6~16位数字或者字母" class="user-name" data-caution="用户名不能为空">
            </div>

            <div class="row1">
                <i class="iconfont icon-phone">&#xe604;</i>
                <input name="referee" id="referee" type="text" placeholder="输入邀请码" class="user-name" data-caution="用户名不能为空">
            </div>
            <!--/row1-->
            <input id="submit" onclick="register()" type="button" value="注册" class="user-agree">
            
            <!--/row1-->
            <div class="row1" style="display:none;">
                <i class="iconfont icon-phone">&#xe605;</i>
                <input type="text" id="QRCodeId" name="QRCodeId" value="" placeholder="二维码id" class="user-name">
            </div>

            <div class="row1" style="display:none;">
                <i class="iconfont icon-phone">&#xe605;</i>
                <input type="text" id="cityId" name="cityId" value="" placeholder="城市" class="user-name">
            </div>

            <div class="row1" style="display:none;">
                <i class="iconfont icon-phone">&#xe605;</i>
                <input type="text" id="deviceId" name="deviceId" value="" placeholder="openid设备号" class="user-name">
            </div>

            <%--<a href="#" class="agreement"><span>早范用户使用协议</span></a>--%>
        </form>

    </div>
</section>
<div class="yhqbg">
    <img class="close-yhq" src="/wechat/images/product_close_red.png">
   <%-- <div class="miaoshu">
        登录后可在 “我的” - “优惠券” 页查看
    </div>--%>
    <div class="yhq">
        <div class="yhq-container">

            <ul class="yhq-ul">
                <div class="yhq-up">
                    <img src="/wechat/images/up.png">
                </div>

                <div class="yhq-lower">
                    <img src="/wechat/images/lower.png">
                </div>
            </ul>

        </div>
    </div>
</div>
<script>
    /*$(function(){
        var str = "2016-11-10 16:21:16";
        console.log("字符串长度："+str.substring(0,10));
    });*/



    $(".yhq").click(function(e){
        e.stopPropagation();//阻止事件向上冒泡
    });
    $(".close-yhq").click(function(){
        $(".yhqbg").hide();
    });
    $("#cityId").val('<%=request.getParameter("cityId")%>');
    $("#deviceId").val('<%=request.getSession().getAttribute("openid")%>');


    var qrcode = localStorage.getItem("qrcode");
    $("#QRCodeId").val(qrcode);

    function register() {
        var checkpwd = /^[0-9a-zA-Z]*$/g;

        if ($("#mobile").val().length == 0){
            tip("my_signin","还未输入手机号",true);
            return;
        }
        if ($("#code").val().length == 0){
            tip("my_signin","还未输入验证码",true);
            return;
        }
        if ($("#password").val().length == 0){
            tip("my_signin","还未输入密码",true);
            return;
        }
        if ($("#password").val().length < 6){
            tip("my_signin","密码过短",true);
            return;
        }
        if ($("#password").val().length > 16){
            tip("my_signin","密码过长",true);
            return;
        }
        if (!checkpwd.test($("#password").val())){
            tip("my_signin","密码只能为数字和字母",true);
            return;
        }



        $.post("/mobile/user?action=register",$("#form").serialize(),
                function(data){
                    if (!data.success){
                        tip("my_signin",data.msg,true);
                    }else {
//                        window.location.href = "/home/beforelogin/index.do";
                        $.ajax({
                            url:"/m/Coupon/registerGift",
                            type:"get",
                            data:{mobile:data.data.mobile},
                            success:function(data){
                                if(data.success){
                                    $(".yhqbg").css("display","block");
                                    var yhq = data.data;
                                    for (var i = 0; i < yhq.length;i++){
                                       /* var btime = yhq[i].createTime;
                                        btime = btime.substring(0,10);
                                        var htime = dateAddDays(btime,yhq[i].deadTime);*/
                                        $(".yhq-up").after(
                                               " <li class=\"yhq-li\">"+
                                                    "<div class=\"money-Box\">"+
                                                        "<p class=\"money-lable\">￥</p><p class=\"money-count\">"+yhq[i].value+"</p>"+
                                                     " </div>"+
                                                     " <div class=\"rule\">"+
                                                        "  <ul class=\"rule-ul\">"+
                                                              "  <li>满"+yhq[i].conditions+"元可用</li>"+

                                                              "       <li>有效期"+yhq[i].deadTime+"</li>"+
                                                         "   </ul>"+
                                                     " </div>"+

                                               "  </li>"
                                        );
                                    }
                                    $(".yhqbg").click(function(){
                                        $(".yhqbg").css("display","none");
                                        window.location.href = "/home/beforelogin/index.do";
                                    });


                                }
                                else {
                                    console.log("获取失败直接登录");
                                    window.location.href = "/home/beforelogin/index.do";
                                }
                            }
                        });


                    }
                },"json");
    }
    function dateAddDays(dataStr,dayCount) {
        var strdate=dataStr; //日期字符串
        var isdate = new Date(strdate.replace(/-/g,"/"));  //把日期字符串转换成日期格式
        isdate = new Date((isdate/1000+(86400*dayCount))*1000);  //日期加1天
        var pdate = isdate.getFullYear()+"-"+(isdate.getMonth()+1)+"-"+(isdate.getDate());   //把日期格式转换成字符串

        return pdate;
    }



    var countdown=60;
    function settime(obj) {
        if (countdown == 0) {
            obj.removeAttribute("disabled");
            obj.value="免费获取验证码";
            countdown = 60;
            return;
        } else {
            obj.setAttribute("disabled", true);
            obj.value="重获 " + countdown + "s";
            countdown--;
        }
        setTimeout(function() { settime(obj) }
                ,1000)
    }

    function sendMessage(obj) {
        if ($("#mobile").val().length == 0){
            tip("my_signin","还未输入手机号",true);
            return;
        }
        settime(obj);

        //向后台发送处理数据
        $.post("/mobile/user?action=code",{mobile:$("#mobile").val()},
                function(data){
                    tip("my_signin",data.msg,true);
                    if (!data.success){
                        setTimeout(function() { window.location.reload(); }
                                ,1000)

                    }
                },"json");
    }

    var from =    window.localStorage.getItem("from");
    if (from!=null){
        $("#from").val(from);
    }
</script>
</body>
</html>
